<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>潮汕明珠 - 汕头</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引用自定义样式 -->
    <link rel="stylesheet" href="style.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#D93A3E',
                        secondary: '#F2A359',
                        accent: '#3D8B37',
                        neutral: '#F5F5F5',
                        dark: '#2C3E50',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Noto Serif SC', 'Georgia', 'serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-neutral font-sans text-dark scroll-smooth">
    <!-- 导航菜单 -->
    <header class="header shadow-md" style="background-color: #3182ce;">
        <div class="container mx-auto flex items-center justify-between py-2 px-4">
            <div class="flex items-center gap-4">
                <div class="logo">
                    <img src="image/logo2.jpg" width="60" height="60" class="rounded-lg shadow" alt="汕头logo">
                </div>
                <span class="text-white text-2xl font-bold tracking-wide drop-shadow">潮汕明珠 · 汕头</span>
            </div>
            <nav class="nav hidden md:flex gap-4 items-center">
                <a href="index.html" class="active font-bold px-4 py-2 rounded shadow hover:bg-yellow-400 transition" style="background-color: #3182ce; color: #fff;">首 页</a>
                <div class="dropdown relative">
                    <a href="index.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍 <i class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="history.html" class="block px-4 py-2 text-dark hover:bg-neutral">历史沿革</a>
                        <a href="culture.html" class="block px-4 py-2 text-dark hover:bg-neutral">文化特色</a>
                    </div>
                </div>
                <div class="dropdown relative">
                    <a href="about.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐 <i class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="dao.html#spot1" class="block px-4 py-2 text-dark hover:bg-neutral">南澳岛</a>
                        <a href="gy.html#spot2" class="block px-4 py-2 text-dark hover:bg-neutral">小公园</a>
                    </div>
                </div>
                <a href="gallery.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
                <a href="contact.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
                <!-- 删除了"联系我们"导航项 -->
            </nav>
            <!-- 移动端菜单按钮 -->
            <div class="caidan md:hidden text-white text-2xl cursor-pointer" id="menu-toggle">
                <i class="fa fa-bars"></i>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <nav class="nav-mobile md:hidden bg-primary px-4 py-2 hidden flex-col gap-2" id="mobile-menu">
            <a href="index.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">首页</a>
            <a href="index.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍</a>
            <a href="history.html" class="block px-4 py-2 text-white hover:bg-neutral">历史沿革</a>
            <a href="culture.html" class="block px-4 py-2 text-white hover:bg-neutral">文化特色</a>
            <a href="about.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐</a>
            <a href="dao.html" class="block px-4 py-2 text-white hover:bg-neutral">南澳岛</a>
            <a href="gy.html#" class="block px-4 py-2 text-white hover:bg-neutral">小公园</a>
            <a href="gallery.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
            <a href="contact.html" class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
           
        </nav>
    </header>

    <!-- 英雄区 -->
    <section id="hero" class="relative h-[60vh] flex items-center justify-center overflow-hidden bg-cover bg-center" style="background-image: url('image/风景 (3).jpg');">
        <div class="absolute inset-0 bg-black opacity-40"></div>
        <div class="container mx-auto px-4 z-10 text-center relative">
            <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-white mb-6 drop-shadow-lg">潮汕明珠 · 汕头</h1>
            <p class="text-xl text-white mb-8 drop-shadow">这里是你了解家乡文化、景点、美食的最佳平台。</p>
            <a href="#attractions" class="inline-block bg-secondary hover:bg-primary text-dark font-bold py-3 px-8 rounded-full shadow-lg transition-all transform hover:scale-105 hover:shadow-xl">了解更多</a>
        </div>
    </section>

    <!-- 景点推荐 -->
    <section id="attractions" class="py-20 bg-neutral">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 reveal">
                    <img src="image/nanao.jpg" alt="南澳岛" class="w-full h-56 object-cover img-hover">
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-2 text-primary">南澳岛</h3>
                        <p class="text-gray-600 mb-4">汕头著名的海岛风景区，风光秀丽。</p>
                        <div class="flex items-center mb-4">
                           
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 reveal">
                    <img src="image/logo.jpg" alt="小公园" class="w-full h-56 object-cover img-hover">
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-2 text-primary"><a href="gy.html">小公园</a></h3>
                        <p class="text-gray-600 mb-4">汕头历史文化地标，见证百年风华。</p>
                        <div class="flex items-center mb-4">
                           
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 reveal">
                    <img src="image/hg.jpg" alt="牛肉火锅" class="w-full h-56 object-cover img-hover">
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-2 text-primary">牛肉火锅</h3>
                        <p class="text-gray-600 mb-4">潮汕特色美食，鲜嫩可口。</p>
                        <div class="flex items-center mb-4">
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-12 reveal">
                <a href="about.html" class="inline-block bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all transform hover:scale-105 hover:shadow-xl">
                    查看更多景点 <i class="fa fa-map-location-dot ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 汕头介绍 -  -->
    <section id="about-shantou" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 reveal">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-primary mb-4">关于汕头</h2>
                <div class="w-20 h-1 bg-secondary mx-auto mb-6"></div>
                
                <div class="max-w-4xl mx-auto">
                    <!-- 历史部分 -->
                    <div class="mb-12 bg-neutral p-8 rounded-xl shadow-sm">
                        <div class="flex items-start">
                            <div class="mr-6 mt-1">
                                <i class="fa fa-history text-primary text-3xl"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-primary mb-3">历史底蕴</h3>
                                <p class="text-lg text-gray-600 leading-relaxed">
                                    汕头有着深厚的历史底蕴，早在新石器时代就有人类在此繁衍生息。在近代，汕头作为中国最早对外开放的港口城市之一，见证了中外贸易的繁荣和文化的交流。如今，汕头依然保留着许多历史建筑和文化遗迹，如小公园、老妈宫等，这些都是汕头历史文化的活见证。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 自然风光部分 -->
                    <div class="mb-12 bg-neutral p-8 rounded-xl shadow-sm">
                        <div class="flex items-start">
                            <div class="mr-6 mt-1">
                                <i class="fa fa-tree text-primary text-3xl"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-primary mb-3">自然风光</h3>
                                <p class="text-lg text-gray-600 leading-relaxed">
                                    除了历史文化，汕头的自然风光也十分迷人。南澳岛作为汕头著名的海岛风景区，拥有细腻的沙滩、清澈的海水和壮观的海景，是休闲度假的好去处。此外，汕头还有许多公园和自然保护区，为市民和游客提供了亲近自然的机会。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 美食文化部分 -->
                    <div class="bg-neutral p-8 rounded-xl shadow-sm">
                        <div class="flex items-start">
                            <div class="mr-6 mt-1">
                                <i class="fa fa-utensils text-primary text-3xl"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-primary mb-3">美食文化</h3>
                                <p class="text-lg text-gray-600 leading-relaxed">
                                    当然，汕头的美食文化更是不容错过。潮汕美食以其精致的制作工艺、鲜美的口感和独特的风味闻名于世，是中国八大菜系之一粤菜的重要组成部分。牛肉火锅、潮汕肠粉、卤鹅等美食，让人垂涎欲滴。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer bg-dark text-white py-6 mt-10">
        <div class="container mx-auto text-center">
            <p>&copy; 2025 我的家乡. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 移动端菜单脚本 -->
    <script>
    window.addEventListener('DOMContentLoaded', function() {
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        menuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });

        // 下拉菜单显示
        document.querySelectorAll('.dropdown').forEach(function(drop) {
            drop.addEventListener('mouseenter', function() {
                const content = drop.querySelector('.dropdown-content');
                if(content) content.classList.remove('hidden');
            });
            drop.addEventListener('mouseleave', function() {
                const content = drop.querySelector('.dropdown-content');
                if(content) content.classList.add('hidden');
            });
        });
    });
    </script>
</body>
</html>